<template>
	<div class="model">
		<h2 class="model__title">重新分配权限<span @click="close" class="model__title--close">&times;</span></h2>
		<div class="model__content" v-loading="loading">
			<div class="model__title">角色列表</div>
			<div>
				<el-transfer 
					:props="props"
					:data="permissions"
					filterable
					filter-placeholder="搜索角色"
					v-model="selectPermissions"
					:button-texts="['删除角色', '添加角色']"
					:titles="['所有角色', '已分配角色']">
				</el-transfer>
			</div>
			<div style="text-align: center;margin-top: 30px;">
				<el-button type="primary" @click="assignPermission">确认分配</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		created(){
			this.fetchPermission();
		},
		props: ["id"],
		data() {
			return {
				loading: true,
				props: {
					key: "group_id",
					label: "group_name",
				},
				selectPermissions: [],
				permissions: []
			}
		},
		methods: {
			close() {
				this.$parent.showModel = false;
			},
			fetchPermission() {
				
				this.loading = true;
				var url = `${this.url}/auth/user_get_manager_group.action`;
				var url2 = `${this.url}/auth/user_get_group_by_user.action`;
				this.$http.get(url).then((res)=> {
					if( res.data.success ) {
						this.permissions = res.data.result.rows;
						console.log(this.id)
						this.$http.get(url2,{ params: {user_id: this.id} }).then( res => {
							this.loading = false;
							res.data.result.rows.forEach(val => {
								this.selectPermissions.push(val.group_id)
							});
						} );
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
				
			},
			assignPermission() {
				this.$parent.showModel = false;
				var url = `${this.url}/auth/user_set_group_by_user.action`;
				var params = {
					user_id: this.id,
					ids: this.selectPermissions.join(",")
				}
				this.$http.get(url, { params }).then((res)=> {
					if( res.data.success ) {
						this.$message({
							type: "success",
							message: "成功"
						});
						
					}else {
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>